<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6Aw5VhxISGq3WBMuSG6kKKn1"></script>
<script type="text/javascript" src="./qwebchannel.js"></script>
<title>添加圆</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">

// 百度地图API功能
var map = new BMap.Map("allmap");
var m_city = "北京";
map.centerAndZoom(m_city, 13);                              // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
map.enableScrollWheelZoom();                               //启用滚轮放大缩小

var m_radius = 1000;
var m_point;


map.addEventListener("click",function(e){
var circle = new BMap.Circle(e.point,m_radius);
map.clearOverlays();
map.addOverlay(circle);
m_point = e.point;
alert(e.point.lng + "," + e.point.lat);
});


function output(message){}
var baseUrl = "ws://localhost:12345";
var socket = new WebSocket(baseUrl);//创建一个Socket实例,连接到服务器
//几个事件的绑定
socket.onclose = function()
{
    console.error("web channel closed");
};
socket.onerror = function(error)
{
    console.error("web channel error: " + error);
};
socket.onopen = function()// 连接成功后触发
{
    output("WebSocket connected, setting up QWebChannel.");
    //将socket交给qwebchannel.js,处理完后回调
    new QWebChannel(socket, function(channel) {
        // make dialog object accessible globally
        window.dialog = channel.objects.dialog;
        //应该是设置全局对象吧,objects里应该就存放着注册的对象
        dialog.sendText.connect(function(message) {
            output("Received message: " + message);
            dialog.receiveText("HTMLUSER");
        });
        //C++调用sendText时会使用到这里的匿名函数
        dialog.receiveText("Client connected, ready to send/receive messages!");
        //HTML直接调用函数
        output("Connected to WebChannel, ready to send/receive messages!");
    });
}






function SetCity(city){
    m_city = city;
}

setTimeout(function(){
    map.setCenter(m_city);
}, 500);


function SetRadius(radius){
    m_radius = radius;
}


function AutoSetCircle(){
    var circle2 = new BMap.Circle(m_point,m_radius);
    map.clearOverlays();
    map.addOverlay(circle2);
}

function ReturnLngLat(){
    var LngLat = new Array();
    LngLat[0] = m_point.lng;
    LngLat[1] = m_point.lat;
    return LngLat;
}
</script>

